<template>
	<view>
		<scroll-view @tap="scroll" :scroll-top="scrollTop" scroll-y="true" style="position:absolute; top:0; left:0; right:0; bottom:0;">
			<view class="container" v-if="detail.goods_id">
				<view class="swiper">
					<swiper :autoplay="autoplay" @change="setCurrent" class="banner-box  swiper-box" :duration="duration"
					 :indicator-dots="indicatorDots" :interval="interval" circular="true">
						<swiper-item v-for="(item,index) in detail.image" :key="index" @tap="onPreviewImages" :data-index="index">
							<image class="slide-image" mode="aspectFill" :src="item.file_path"></image>
						</swiper-item>
					</swiper>
					<view class="banner-num">
						<text>{{currentIndex}}</text>
						<text>/{{detail.image.length}}</text>
					</view>
				</view>
				<view class="cont-box b-f">
					<view class="dis-flex flex-y-center">
						<view class="left flex-box dis-flex flex-dir-column">
							<!-- 商品名称 -->
							<view class="goods-title ">
								<text class="title f-30 twolist-hidden">{{detail.goods_name}}</text>
							</view>
							<!-- 商品卖点 -->
							<view class="goods-selling-point">
								<text class="f-24">{{detail.selling_point }}</text>
							</view>
							<view class="money-box dis-flex flex-y-center">
								<!-- 商品价 -->
								<view class="goods-price">
									<text class="col-m f-26">￥</text>
									<text class="goods-price_num col-m f-40">{{ goods_price }}</text>
								</view>
								<!-- 划线价 -->
								<view class="line-price" v-if="line_price > 0">
									<text>￥{{ line_price }}</text>
								</view>
								<!-- 会员价标签 -->
								<view v-if=" detail.is_user_grade " class="tag-grade-price">
									<text>会员折扣价</text>
								</view>
							</view>
						</view>
						<!-- 分享按钮 -->
						<view class="right goods__share">
							<form @submit="onClickShare" report-submit="true">
								<button form-type="submit" class="share-btn dis-flex flex-dir-column">
									<text class="share__icon iconfont icon-fenxiang"></text>
									<text class="f-24">分享</text>
								</button>
							</form>
						</view>
					</view>
					<view class="goods-sales-box f-28 dis-flex col-8">
						<text class="flex-box num">销量：{{detail.goods_sales}}</text>
					</view>
				</view>
				<!-- 选择商品规格 -->
				<form v-if="goodsMultiSpec.spec_attr" @submit="onToggleTrade" report-submit>
					<button class="btn-normal" form-type="submit">
						<view class="sku-selector cont-box b-f m-top20 dis-flex flex-y-center">
							<view class="flex-box f-28">
								<text class="col-9">选择：</text>
								<text v-for="(item,index) in goodsMultiSpec.spec_attr" :key="index"> {{item.group_name }} </text>
							</view>
							<view class="flex-box f-26 col-9 t-r">
								<text class="iconfont icon-xiangyoujiantou"></text>
							</view>
						</view>
					</button>
				</form>
				<!-- 确认购买弹窗 -->
				<view class="pop pop--bottom" :class="[showBottomPopup ? 'pop--show' : '']">
					<view class="pop__mask"></view>
					<view class="pop__container">
						<view class="popup__trade">
							<!-- 关闭按钮 -->
							<view class="trade-close dis-flex flex-x-center flex-y-center" @tap="onToggleTrade">
								<text class="iconfont icon-close f-26"></text>
							</view>
							<!-- 主体信息 -->
							<view class="trade-main">
								<view class="goods-info dis-flex">
									<!-- 图片名称 -->
									<view class="goods-image" @tap="onPreviewSkuImage">
										<image :src="skuCoverImage"></image>
									</view>
									<view class="right flex-box">
										<view class="money-box dis-flex flex-y-end">
											<!-- 商品价 -->
											<view class="goods-price">
												<text class="col-m f-26">￥</text>
												<text class="goods-price_num col-m f-40">{{ goods_price }}</text>
											</view>
											<!-- 划线价 -->
											<view class="line-price" v-if="line_price > 0">
												<text>￥{{ line_price }}</text>
											</view>
										</view>
										<view class="goods-stock dis-flex">
											<text class="flex-box f-26 col-7">库存：{{stock_num}}</text>
										</view>
									</view>
								</view>
								<view class="goods-attr">
									<!-- 滚动容器 -->
									<scroll-view class="goods-attr--scroll" scroll-y="true">
										<view class="group-item" v-for="(attr,attr_idx) in goodsMultiSpec.spec_attr" :key="attr_idx">
											<view class="tipstxt" :data-id="attr.group_id">{{attr.group_name}}</view>
											<view class="spec-item" v-for="(item_attr,item_idx) in attr.spec_items" :class="[ item_attr.checked ? 'cur' : '' ]" 
										 :key="item_idx" @tap="onSwitchSpec(attr_idx,item_idx)">
												{{ item_attr.spec_value }}
											</view>

										</view>
									</scroll-view>
								</view>
								<!-- 购买数量 -->
								<view class="buy_number">
									<view class="buyNumber f-26">
										<text>购买数量</text>
									</view>
									<view class="select-number">
										<form @submit="onDecGoodsNumber" report-submit="true">
											<button formType="submit" class="default" :class="goods_num > 1 ? '' : 'disabled' " type="default">-</button>
										</form>
										<input @input="onInputGoodsNum" type="number" :value=" goods_num "></input>
										<form @submit="onIncGoodsNumber" report-submit="true">
											<button form-type="submit" class="default" type="default">+</button>
										</form>
									</view>
								</view>
							</view>
							<!-- 底部操作栏 -->
							<view class="footer-fixed f-30">
								<block v-if="stock_num > 0">
									<view class="order-number" @tap="onConfirmSubmit" data-type="addCart">加入购物车</view>
									<view class="order-bt" @tap="onConfirmSubmit" data-type="buyNow"> 立即购买</view>
								</block>
								<view class="default-btn" v-else>暂无现货</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 商品评价 -->
				<view class="goods-comment" v-if="detail.comment_data.length ">
					<view class="cont-box b-f goods-property-box m-top20">
						<text class="col-3 f-30">评价 ( {{ detail.comment_data_count }}条)</text>
						<text @tap="onTargetToComment" class="comment-num">查看更多</text>
						<view class="goods-property-jianTou">
							<text class="iconfont icon-xiangyoujiantou user-orderJtou" style="margin-top:0;"></text>
						</view>
					</view>
					<view class="goods-comment-box b-f" v-for="(item,index) in detail.comment_data" :key="index">
						<view class="cont-box goods-comment-box b-t b-f b-b">
							<view class="dis-flex">
								<view class="user">
									<text class="user_name f-26"> {{item.user.nickName }}</text>
								</view>
								<view class="com_xing">
									<text class="iconfont icon-shoucang active"></text>
									<block v-if=" item.score < 30 ">
										<text class="iconfont icon-shoucang active"></text>
										<text class="iconfont icon-shoucang active"></text>
									</block>
									<block v-if=" item.score < 20 ">
										<text class="iconfont icon-shoucang active"></text>
										<text class="iconfont icon-shoucang active"></text>
									</block>
								</view>
							</view>
							<view class="goods-comment-cont m-top20">
								<text class="f-26 twolist-hidden"> {{ item.content }}</text>
							</view>
							<view class="f-22 col-9 m-top10"> {{ item.create_time }}</view>
						</view>
					</view>
				</view>

				<!-- 商品描述 -->
				<view class="p-bottom" style="background: #FFFFFE;padding: 0 10upx;margin-bottom: 47px;">
					<view class="top-nav m-top20 b-f b-b">
						<view class="top-nav-bar">商品描述</view>
					</view>
					<view class="order" :hidden="hiddenOrder">
						<view v-if="detail.content!=''">
							<view class="b-f goods-detail-box">
								<view class="goods-cont-li">
									<rich-text :nodes="article"></rich-text>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="yoshop-notcont">
								<text class="iconfont icon-wushuju"></text>
								<text class="cont">亲,此处暂无详情数据</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部操作栏 -->
				<view class="footer-fixed f-30">

					<!-- 在线客服 -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="goods-fixed-icon dis-flex flex-x-center flex-y-center">
						<button open-type="contact" sessionFrom="weapp" size="27" style="opacity: 0;position:absolute;top:0px;left:0px;display:block;width:100%;height:100%;"
						 type="default-light"></button>
						<text class="iconfont icon-kefu "></text>
					</view>
					<!-- #endif -->

					<!-- #ifdef APP-PLUS  || H5-->
					<view class="goods-fixed-icon dis-flex flex-x-center flex-y-center">
						<button  size="27" style="opacity: 0;position:absolute;top:0px;left:0px;display:block;width:100%;height:100%;"
						 type="default-light" @tap="openkefu"></button>
						<text class="iconfont icon-kefu "></text>
					</view>
					<!-- #endif -->
					
					<!-- 购物车按钮 -->
					<view @tap="onTriggerCart" class="goods-fixed-icon dis-flex flex-x-center flex-y-center">
						<!-- <image class="flow-img" src="/../../static/img/tabBar/cart.png"></image> -->
						<text class="iconfont icon-cart flow-img"></text>
						<view class="flow_num" v-if="cart_total_num > 0">
							<text class="">{{cart_total_num}}</text>
						</view>
					</view>

					<view class="order-number" @tap="onToggleTrade">加入购物车</view>
					<view class="order-bt" @tap="onToggleTrade">立即购买</view>
				</view>
			</view>

			<!-- 返回顶部 -->
			<view @tap="goTop" class="widget-goTop" v-if="floorstatus">
				<text class="iconfont icon-fanhuidingbu"></text>
			</view>

			<!-- 分享按钮 -->
			<zanactionsheet :show="share.show" :actions="share.actions" :cancelText="share.cancelText" :cancelWithMask="share.cancelWithMask"
			 mask-class="tiny" :goods_name="detail.goods_name" />


			<!-- 商品海报 弹出层 -->
			<!-- <zanpopup :show="share.showPopup" @close="togglePopup"> -->
			<view class="pop pop--bottom" :class="[share.showPopup ? 'pop--show' : '']" @close="onTogglePopup">
				<view class="pop__mask" @tap="onTogglePopup"></view>

				<view class="pop-poster pop-example__container pop__container" style="bottom: 10%;">
					<!-- 关闭按钮 -->
					<view class="pop-close dis-flex flex-x-center flex-y-center" @tap="onTogglePopup">
						<text class="iconfont icon-shanchu f-30 col-9"></text>
					</view>
					<form @submit="onSavePoster" report-submit="true">
						<view class="poster__image">
							<image mode="widthFix" :src="qrcode"></image>
						</view>
						<view class="poster__tips m-top10 t-c">
						</view>
						<view class="padding-box m-top10 profile-btn">
							<button form-type="submit">保存图片</button>
						</view>
					</form>
				</view>
			</view>
			<!-- </zanpopup> -->




		</scroll-view>

		<!-- 快捷导航 -->
		<shortcut id=""></shortcut>
	</view>
</template>

<script>
	import util from '../../utils/util.js';
	import zanactionsheet from '../../components/goods/actionsheet.vue'
	import zanpopup from '../../components/goods/popup.vue'
	import shortcut from '../../components/goods/shortcut.vue'
	export default {
		components: {
			// （组件命名）
			zanactionsheet,
			zanpopup,
			shortcut
		},
		props: {
			zanpopup: {},
			shortcut: {},
			zanactionsheet: {}
		},
		data() {
			return {
				article: '',
				indicatorDots: true, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				interval: 3000, // 自动切换时间间隔
				duration: 800, // 滑动动画时长

				currentIndex: 1, // 轮播图指针
				floorstatus: false, // 返回顶部
				showView: true, // 显示商品规格

				detail: {}, // 商品详情信息
				goods_price: 0, // 商品价格
				line_price: 0, // 划线价格
				stock_num: 0, // 库存数量
				goodsMultiSpec: [],

				goods_num: 1, // 商品数量
				goods_sku_id: 0, // 规格id
				cart_total_num: 0, // 购物车商品总数量
				specData: {}, // 多规格信息
				scrollTop: '',
				showBottomPopup: null,
				hiddenOrder: null,
				skuCoverImage: null,
				image_path: '',
				qrcode: '',
				// share: {},
				putaway: 2, // 是否上架，默认2


				// 分享按钮组件(待开发)
				share: {
					show: false,
					cancelWithMask: true,
					cancelText: '关闭',
					actions: [{
						name: '生成商品海报',
						className: 'action-class',
						loading: false
					}, {
						name: '发送给朋友',
						openType: 'share'
					}],
					// 商品海报
					showPopup: false,
				},
				goodsSpecArr:[]
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(e) {
			let _this = this;
			let scene = _this.getSceneData(e);
			// 商品id
			_this.goods_id = e.goods_id ? e.goods_id : scene.gid;
			// 获取商品信息
			_this.getGoodsDetail();

		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			let _this = this;
			// 构建页面参数
			let params = _this.getShareUrlParams({
				'goods_id': _this.goods_id
			});
			return {
				title: _this.detail.goods_name,
				path: "/pages/goods/index?" + params
			};
		},


		methods: {
			
			/**
			 * app客服
			 */
			openkefu: function() {
				let url = 'mqqwpa://im/chat?chat_type=crm&uin=' + this.getQQkefu()
				this.openBrowser(url);
			},
			/**
			 * 获取场景值(scene)
			 */
			getSceneData: function(query) {
				return query.scene ? util.scene_decode(query.scene) : {};
			},


			// 记录规格的数组
			// goods_spec_arr: {},


			/**
			 * 获取商品信息
			 */
			getGoodsDetail: function() {
				let _this = this;
				this._get('goods/detail', {
					goods_id: _this.goods_id
				}, function(result) {
					// 初始化商品详情数据
					let data = _this.initGoodsDetailData(result.data);
					// console.log(data);

					_this.setData(data);
				});


			},

			/**
			 * 初始化商品详情数据
			 */
			initGoodsDetailData: function(data) {
				let _this = this;
				// 商品详情
				let goodsDetail = data.detail;
				// 富文本转码
				if (goodsDetail.content.length > 0) {
					let article = goodsDetail.content.replace(/<img/g, "<img style='max-width:100%;height:auto;'");
					_this.setData({
						'article': article
					});
				}
				// 商品价格/划线价/库存
				data.goods_sku_id = goodsDetail.goods_sku.spec_sku_id;
				data.goods_price = goodsDetail.goods_sku.goods_price;
				data.line_price = goodsDetail.goods_sku.line_price;

				data.stock_num = goodsDetail.goods_sku.stock_num;
				// 商品封面图(确认弹窗)
				data.skuCoverImage = goodsDetail.goods_image;
				// 多规格商品封面图(确认弹窗)
				if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
					data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
				}
				// 初始化商品多规格
				if (goodsDetail.spec_type == 20) {
					data.goodsMultiSpec = _this._initManySpecData(goodsDetail.goods_multi_spec);
				}
				return data;
			},

			/**
			 * 初始化商品多规格
			 */
			_initManySpecData(data) {

				this.goodsSpecArr = [];
				for (let i in data.spec_attr) {
					for (let j in data.spec_attr[i].spec_items) {
						if (j < 1) {
							data.spec_attr[i].spec_items[0].checked = true;
							this.goodsSpecArr[i] = data.spec_attr[i].spec_items[0].item_id;
						}
					}
				}
				return data;
			},
			
			/**
			 * 点击切换不同规格
			 */
			onSwitchSpec(attr_idx,item_idx) {
				let _this = this,
					attrIdx = attr_idx,
					itemIdx = item_idx,
					goodsMultiSpec = _this.goodsMultiSpec;
				
				for (let i in goodsMultiSpec.spec_attr) {
					for (let j in goodsMultiSpec.spec_attr[i].spec_items) {
						if (attrIdx == i) {
							goodsMultiSpec.spec_attr[i].spec_items[j].checked = false;
							if (itemIdx == j) {
								goodsMultiSpec.spec_attr[i].spec_items[itemIdx].checked = true;
			
								this.goodsSpecArr[i] = goodsMultiSpec.spec_attr[i].spec_items[itemIdx].item_id;
			
							}
						}
					}
				}
				
				_this.setData({
					goodsMultiSpec
				});
				
				
				// 更新商品规格信息
				_this._updateSpecGoods();
			},
			
			/**
			 * 更新商品规格信息
			 */
			_updateSpecGoods() {
				let _this = this,
					specSkuId = this.goodsSpecArr.join('_');
				// 查找skuItem
				let spec_list = _this.goodsMultiSpec.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == specSkuId;
					});
			
				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
			
					_this.setData({
						goods_sku_id: skuItem.spec_sku_id,
						goods_price: skuItem.form.goods_price,
						line_price: skuItem.form.line_price,
						stock_num: skuItem.form.stock_num,
						skuCoverImage: skuItem.form.image_id > 0 ? skuItem.form.image_path : _this.detail.goods_image
					});
				}
			},

			/**
			 * 设置轮播图当前指针 数字
			 */
			setCurrent: function(e) {
				this.setData({
					currentIndex: e.detail.current + 1
				});
			},

			/**
			 * 返回顶部
			 */
			onScrollTop: function(t) {
				this.setData({
					scrollTop: 0
				});
			},

			/**
			 * 显示/隐藏 返回顶部按钮
			 */
			scroll: function(e) {
				this.setData({
					floorstatus: e.detail.scrollTop > 200
				})
			},

			/**
			 * 增加商品数量
			 */
			onIncGoodsNumber: function() {
				this.setData({
					goods_num: ++this.goods_num
				})
			},


			/**
			 * 减少商品数量
			 */
			onDecGoodsNumber: function() {
				if (this.goods_num > 1) {
					this.setData({
						goods_num: --this.goods_num
					});
				}
			},
			/**
			 * 自定义输入商品数量
			 */
			onInputGoodsNum(e) {
				let _this = this,
					iptValue = e.detail.value;
				if (!util.isPositiveInteger(iptValue) && iptValue !== '') {
					iptValue = 1;
				}
				_this.setData({
					goods_num: iptValue
				});
			},


			/**
			 * 跳转购物车页面
			 */
			onTriggerCart: function() {
				uni.switchTab({
					url: "../flow/index"
				});
			},

			/**
			 * 加入购物车and立即购买
			 */
			onConfirmSubmit(e) {
				let _this = this,
					submitType = e.currentTarget.dataset.type;
				// 表单验证
				if (!_this._onVerify()) {
					return false;
				}

				if (submitType === 'buyNow') {
					// 立即购买
					uni.navigateTo({
						url: '../flow/checkout?' + util.urlEncode({
							order_type: 'buyNow',
							goods_id: _this.goods_id,
							goods_num: _this.goods_num,
							goods_sku_id: _this.goods_sku_id,
							// #ifdef APP-PLUS
							posttype: "android",
							// #endif
						}),
						success() {
							// 关闭弹窗
							_this.onToggleTrade();
						}
					});
				} else if (submitType === 'addCart') {
					// 加入购物车
					_this._post_form('cart/add', {
						goods_id: _this.goods_id,
						goods_num: _this.goods_num,
						goods_sku_id: _this.goods_sku_id,
					}, (result) => {
						_this.showSuccess(result.msg);
						_this.setData(result.data);
					});
				}
			},
			/**
			 * 表单验证
			 */
			_onVerify() {
				let _this = this;
				if (_this.goods_num === '') {
					_this.showError('请输入购买数量');
					return false;
				}
				// 将购买数量转为整型，防止出错
				_this.setData({
					goods_num: parseInt(_this.goods_num)
				});
				if (_this.goods_num <= 0) {
					_this.showError('购买数量不能为0');
					return false;
				}
				return true;
			},


			/**
			 * 浏览商品图片
			 */
			onPreviewImages(e) {
				let _this = this;
				let index = e.currentTarget.dataset.index,
					imageUrls = [];
				_this.detail.image.forEach(item => {
					imageUrls.push(item.file_path);
				});
				uni.previewImage({
					current: imageUrls[index],
					urls: imageUrls
				})
			},


			/**
			 * 预览Sku规格图片
			 */
			onPreviewSkuImage: function(e) {
				let _this = this;
				uni.previewImage({
					current: _this.skuCoverImage,
					urls: [_this.skuCoverImage]
				})
			},

			/**
			 * 跳转到评论
			 */
			onTargetToComment: function() {
				uni.navigateTo({
					url: './comment/comment?goods_id=' + this.goods_id
				})
			},



			/**
			 * 显示分享选项
			 */
			onClickShare(e) {
				var _this = this;
				// #ifdef APP-PLUS || H5
					uni.showActionSheet({
						itemList: ['生成商品海报', '发送给朋友'],
						success: function (res) {
							_this.toShare(res.tapIndex)
						},
					})
					return;
				// #endif
				this.setData({
					'share.show': true
				});
			},
			/**
			 * 分享当前页面
			 */
			onShareAppMessage() {
				let _this = this;
				// 构建页面参数
				let params = _this.getShareUrlParams({
					'goods_id': _this.goods_id
				});
				return {
					title: _this.detail.goods_name,
					path: "/pages/goods/index?" + params
				};
			},

			/**
			 * 关闭分享选项
			 */
			onCloseShare() {
				let _this = this;
				_this.setData({
					'share.show': false
				});
			},

			/**
			 * 点击生成商品海报
			 */
			onClickShareItem(e) {
				let _this = this;
				// if (e.detail.index === 0) {
				// 显示商品海报
				_this._showPoster();
				// }
				_this.onCloseShare();
			},
			/* 
			* 用户点击了分享 
			 */
			toShare(e){
				let _this = this;
				if (e == 0) {//分享到海报
				
					let goodsinfo = {
						"goods_trueprice": _this.goods_price, 
						"goods_image": _this.detail.goods_image,
						"goods_name": _this.detail.goods_name,
						"goods_id": _this.detail.goods_id, 
					};
					uni.setStorageSync('goodsinfo', goodsinfo);
				
					uni.navigateTo({
						url:'../../pages/poster/index?posterType=goods'
					})
				}else{//分享到微信
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: uni.getStorageSync('versionInfo').url,
					title: _this.detail.goods_name,
					summary: _this.detail.goods_name,
					imageUrl: _this.detail.selling_point,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
				}
			},
			/**
			 * 切换商品海报
			 */
			onTogglePopup() {
				let _this = this;
				_this.setData({
					'share.showPopup': !_this.share.showPopup
				});
			},


			/**
			 * 显示商品海报图
			 */
			_showPoster() {
				let _this = this;
				uni.showLoading({
					title: '加载中',
				});
				_this._get('goods/poster', {
					goods_id: _this.goods_id
				}, (result) => {
					// console.log(result.data);
					_this.setData(result.data);
					_this.onTogglePopup();
				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 保存海报图片
			 */
			onSavePoster(e) {
				let _this = this;
				// 记录formId
				// _this.saveFormId(e.detail.formId);
				uni.showLoading({
					title: '加载中',
				});
				// 下载海报图片
				uni.downloadFile({
					url: _this.qrcode,
					success(res) {
						uni.hideLoading();
						// 图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(data) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
								// 关闭商品海报
								_this.onTogglePopup();
							},
							fail(err) {
								console.log(err.errMsg);
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showToast({
										title: "请允许访问相册后重试",
										icon: "none",
										duration: 1000
									});
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							},
							complete(res) {
								console.log('complete');
								// uni.hideLoading();
							}
						})
					}
				})
			},
			/**
			 * 确认购买弹窗
			 */
			onToggleTrade(e) {
				// return false;
				if (typeof e === 'object') {
					// 记录formId
					e.detail.hasOwnProperty('formId') && this.saveFormId(e.detail.formId);
				}
				this.setData({
					showBottomPopup: !this.showBottomPopup
				});

				// console.log(123)
			},
		}
	};
</script>

<style>
	/* wxParse.wxss */

	.slide-image {
		background: #fff;
	}

	.banner-box {
		height: 750upx;
		border-bottom: 1upx solid #e4e4e4;
	}

	.user-orderJtou {
		color: #999;
		font-size: 26upx;
		position: absolute;
		top: 50%;
		margin-top: -9upx;
	}

	/* 底部操作栏 */

	.footer-fixed .goods-fixed-icon {
		width: 150upx;
		background: #fff;
		margin: 0 auto;
		padding: 0 6upx;
		border-left: 1upx solid #eee;
		height: 92upx;
		position: relative;
	}

	.footer-fixed .goods-fixed-icon:first-child {
		border-left: none;
	}

	.footer-fixed .goods-fixed-icon image {
		width: 56upx;
		height: 56upx;
		display: block;
		position: absolute;
		left: 0%;
		margin-left: 30upx;
		top: 0%;
		margin-top: 17upx;
	}

	.footer-fixed .goods-fixed-icon text {
		color: #7a7e83;
		font-size: 48upx;
	}

	.footer-fixed .goods-fixed-icon .bargain-icon {
		height: 50upx;
	}

	.footer-fixed .goods-fixed-icon .bargain-icon image {
		height: 50upx;
		width: 50upx;
		margin-top: -40upx;
	}

	.footer-fixed .goods-fixed-icon .bargain-home {
		margin-top: 6upx;
		text-align: center;
	}

	.footer-fixed .goods-fixed-icon .flow_num text {
		display: block;
		color: #fff;
		font-size: 22upx;
		text-align: center;
	}

	.footer-fixed .goods-fixed-icon .icon-shoucang {
		font-size: 40upx;
	}

	.footer-fixed .goods-fixed-icon .s_cont {
		color: #ff495e;
	}

	/* 商品标题 */

	.goods-title {
		overflow: hidden;
		padding: 0 0upx 0 0;
		color: #333;
	}

	/* 商品价格 */

	.money-box {
		margin: 10upx 0;
		display: block !important;
	}

	.money-box .goods-price .goods-price_num {
		font-size: 40upx;
	}

	.money-box .line-price {
		font-size: 24upx;
		color: #999;
		padding-top: 6upx;
		text-decoration: line-through;
		margin-left: 12upx;
	}

	/* 会员价标签 */

	.tag-grade-price {
		background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
		background: #fc1e56;
		font-size: 22upx;
		border-radius: 12upx;
		color: #fff;
		padding: 4upx 12upx;
		margin-left: 20upx;
	}

	/* 商品销量 */

	.goods-sales-box .stock {
		display: block;
		text-align: right;
	}

	/* 商品评论 */

	.goods-comment .goods-property-box {
		position: relative;
		padding: 12px;
	}

	.goods-comment .goods-property-jianTou {
		width: 52upx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -13upx;
	}

	.goods-comment .goods-property-jianTou image {
		height: 100%;
		width: 100%;
	}

	.goods-comment-box .comment_btn {
		width: 220upx;
		margin: 0 auto;
		padding: 20upx 0;
	}

	.goods-comment-box .comment_btn text {
		display: block;
		padding: 5upx 0;
		color: #ff495e;
		font-size: 26upx;
		text-align: center;
		border: 1px solid #ff495e;
		border-radius: 30upx;
	}


	/* 商品规格 */

	.goods-attr {
		padding: 10upx 0;
	}

	.goods-attr .goods-attr--scroll {
		max-height: 600upx;
	}

	.goods-attr .group-item .tips-text {
		font-size: 26upx;
		color: #888;
		margin-bottom: 10upx;
	}

	.goods-attr .group-item .spec-item {
		display: inline-block;
		font-size: 26upx;
		height: 55upx;
		line-height: 55upx;
		padding: 0 30upx;
		margin: 0 20upx 20upx 0;
		border-radius: 8upx;
		color: #888;
		border: 1rpx solid #e6e6e6;
	}

	.goods-attr .group-item .spec-item.cur {
		background: #f82169;
		border: 1upx solid #f82169;
		color: #fff;
	}

	.goods-attr .group-item .spec-item.cur:after {
		position: absolute;
		bottom: 0;
		right: 0;
		content: '';
		display: inline-block;
		width: 16upx;
		height: 16upx;
	}

	.goods-attr .group-item .spec-item.disabled {
		color: #dedede;
		cursor: not-allowed;
		background: #eee;
		border: 2upx dashed #dedede;
	}

	/* banner计数 */

	.banner-num {
		position: absolute;
		right: 30upx;
		margin-top: -70upx;
		padding: 0 18upx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50upx;
		color: #fff;
		font-size: 32upx;
	}

	.banner-num text:last-child {
		color: rgba(255, 255, 255, 0.6);
		font-size: 26upx;
	}

	.footer-fixed .order-number {
		width: 50%;
		background: linear-gradient(to right, #fac905 0, #ff9500 100%);
		color: #fff;
		text-align: center;
		line-height: 92upx;
	}

	.footer-fixed .order-number button {
		background: none;
		padding: 0;
		font-size: 34upx;
		color: #fff;
		line-height: inherit;
		border-radius: 0;
		border: 0;
	}

	.footer-fixed .order-number button::after {
		content: " ";
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: 0;
		border: none;
		transform: scale(0);
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 0;
	}

	.footer-fixed .default-btn {
		width: 100%;
		background-color: #ccc;
		color: #fff;
		text-align: center;
		line-height: 92upx;
	}

	.footer-fixed .flow_num {
		background: #ff495e;
		position: absolute;
		right: 20upx;
		top: 10upx;
		border-radius: 30upx;
		height: 30upx;
		min-width: 30upx;
	}

	/* 商品详情 */

	.goods-detail-box {
		font-size: 28upx;
	}

	/* 评价次数 */

	.comment-num {
		position: absolute;
		right: 34px;
		top: 50%;
		margin-top: -20upx;
		font-size: 28upx;
		color: #333;
	}

	.top-nav-bar {
		padding: 24upx;
		font-size: 28upx;
		color: #333;
	}

	.goods-fixed-icon contact-button {
		display: block;
	}

	/* 商品分享 */

	.goods__share button.share-btn {
		line-height: normal;
		padding: 0 0 0 10upx;
		background: none;
		border-radius: 0;
		box-shadow: none;
		font-size: 8pt;
		border: none;
		color: #888;
	}

	.goods__share button.share-btn::after {
		border: none;
	}

	.goods__share button.share-btn1 {
		line-height: normal;
		/* padding: 0 0 0 10upx; */
		background: none;
		border-radius: 0;
		box-shadow: none;
		font-size: 8pt;
		border: none;
		color: #888;
	}

	.goods__share button.share-btn1::after {
		border: none;
	}

	.goods__share .share__icon {
		font-size: 46upx;
		margin-bottom: 5upx;
	}

	/* 商品海报 弹出层 */

	.pop-poster {
		position: relative;
		background: #fff;
		padding: 42upx;
		border-radius: 10upx;
	}

	/* 关闭按钮 */

	.pop-poster .pop-close {
		position: absolute;
		width: 56upx;
		height: 56upx;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0 0 25upx rgba(0, 0, 0, 0.15);
		right: -28upx;
		top: -28upx;
	}

	.pop-poster .pop-close text {
		display: block;
	}

	.pop-poster .poster__image {
		padding: 0 40upx;
	}

	.pop-poster .poster__image image {
		box-shadow: 0 0 25upx rgba(0, 0, 0, 0.15);
		width: 460upx;
		height: 696.746upx;
	}

	.pop-poster .profile-btn button {
		margin-bottom: 0;
	}

	/* sku选择器 */

	.sku-selector {
		padding: 30upx 20upx;
	}

	/* 确认购买弹窗 */

	.popup__trade {
		width: 750upx;
		position: relative;
		padding-bottom: 92upx;
		z-index: 999;
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20upx;
		right: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 24upx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
	}

	.popup__trade .trade-main .goods-info {
		margin-bottom: 10upx;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -40px;
		margin-right: 20upx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 90px;
		height: 90px;
		border: 5upx solid #fff;
		box-shadow: 0 4upx 10upx rgba(220, 220, 220, 0.79);
	}

	.popup__trade .trade-main .goods-info .money-box {
		margin: 0;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10upx;
	}

	.popup__trade .trade-main .buy_number {
		margin: 20upx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .buy_number .buyNumber {
		color: #888;
		background: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
	}

	/* 弹窗 */
	.pop {
		visibility: hidden
	}

	.pop--show {
		visibility: visible
	}

	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 14;
		background: rgba(0, 0, 0, .5);
		display: none
	}

	.pop__mask--hide {
		background: 0 0
	}

	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 15;
		opacity: 0
	}

	.pop--show .pop__container {
		opacity: 1
	}

	.pop--show .pop__mask {
		display: block
	}

	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}

	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}

	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}

	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}

	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}

	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}

	/* 商品卖点 */

	.goods-selling-point {
		color: #f20c59;
	}

	.select-number {
		width: 202rpx;
		height: 52rpx;
		flex-direction: row;
		border: 1rpx solid rgb(231, 231, 231);
		border-radius: 5rpx;
	}

	.select-number .default {
		float: left;
		width: 60rpx;
		height: 52rpx;
		line-height: 48rpx;
		padding: 0;
		background: #fff;
		color: #444;
		font-size: 40rpx;
		border-radius: unset;
	}

	.select-number .disabled {
		background: #f7f7f7;
		color: #ddd;
	}

	.select-number button:after {
		content: none;
		border: none;
	}

	.select-number input {
		float: left;
		width: 80rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-right: 1rpx solid #eee;
		border-left: 1rpx solid #eee;
		text-align: center;
		font-size: 28rpx;
		color: #444;
	}
</style>
